<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>AngoraEditor -- based on Phaser Game Engine</title>
		<link rel="stylesheet" href="style/style.css" media="screen">
		<link rel="stylesheet" href="script/jquery/themes/metro/easyui.css" media="screen">
		<link rel="stylesheet" href="script/jquery/themes/icon.css" media="screen">
		<link rel="stylesheet" href="style/icons.css" media="screen">
		<link rel="stylesheet" href="script/codemirror/addon/hint/show-hint.css" media="screen">	
		
		<script type="text/javascript" src="script/phaser.min.js"></script>
		<script type="text/javascript" src="script/jquery/jquery.min.js"></script>
		<script type="text/javascript" src="script/jquery/jquery.mousewheel.min.js"></script>
		<script type="text/javascript" src="script/jquery/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="script/editor/AngoraEditor.js"></script>
		<script type="text/javascript" src="script/editor/game.js"></script>
		<script type="text/javascript" src="script/editor/nodeAttr.js"></script>
		<script type="text/javascript" src="script/editor/file.js"></script>
		<script type="text/javascript" src="script/editor/menu.js"></script>
		<script type="text/javascript" src="script/editor/scene.js"></script>
		<script type="text/javascript" src="script/editor/sceneScript.js"></script>
		<script type="text/javascript" src="script/editor/node.js"></script>
		<script type="text/javascript" src="script/editor/project.js"></script>
		<script type="text/javascript" src="script/editor/system.js"></script>
		<script type="text/javascript" src="script/editor/resource.js"></script>
		<script type="text/javascript" src="script/editor/nodetree.js"></script>
		<script type="text/javascript" src="script/editor/propertygrid.js"></script>
		<script type="text/javascript" src="script/editor/scenepane.js"></script>
		<script type="text/javascript" src="script/editor/eventpane.js"></script>
		<script type="text/javascript" src="script/editor/gamepane.js"></script>
		<script type="text/javascript" src="script/editor/ui.js"></script>
		<script type="text/javascript" src="script/editor/uiCallback.js"></script>
		
		
		<link rel="stylesheet" href="script/codemirror/lib/codemirror.css">
		<link rel="stylesheet" href="script/codemirror/addon/lint/lint.css">
		<script src="script/codemirror/lib/codemirror.js"></script>
		<script src="script/codemirror/mode/javascript/javascript.js"></script>
		<script src="script/codemirror/addon/lint/jshint.js"></script>
		<script src="script/codemirror/addon/lint/lint.js"></script>
		<script src="script/codemirror/addon/lint/javascript-lint.js"></script>
		<script src="script/codemirror/addon/hint/javascript-hint.js"></script>
		<script src="script/codemirror/addon/hint/show-hint.js"></script>
		<style>
		  .CodeMirror {
			  font-size:16px;
			  height: 100%;
			}
			.CodeMirror-scroll {
			  overflow-y: hidden;
			  overflow-x: auto;
			}
			#preview.grid{
				background-image: linear-gradient(0deg, #FFFFFF 1px, rgba(0,0,0,0) 1px), linear-gradient(90deg, #FFFFFF 1px, rgba(0,0,0,0) 1px), linear-gradient(0deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), linear-gradient(90deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px);
				background-size: 32px 32px;
			}
			#preview{
				background-color: lightgray;
			}
			div {
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				cursor: default;
			}
			#worldbounds{
				position:absolute;
				left:0px;
				top:0px;
				width:800px;
				height:600px;
				background:gray;
				border:1px solid black;
				visibility:hidden;
				opacity: 0.2;
				pointer-events: none;
			}
			.nodeselected{
				border:3px solid red !important;
			}
		</style>
	</head>
	<body>
	<div class="easyui-layout" fit="true">
		<div id="topContainer" data-options="region:'north'" style="overflow:hidden">
			<div >
			<a href="#" class="easyui-menubutton" menu="#submenu_file" iconCls="icon-ae-file">File</a>
			<a href="#" class="easyui-menubutton" menu="#submenu_view" iconCls="icon-ae-view">View</a>
			<a href="#" class="easyui-menubutton" menu="#submenu_tools" iconCls="icon-ae-tools">Tools</a>
			<a href="#" class="easyui-menubutton" menu="#submenu_app" iconCls="icon-ae-config">App</a>
			<a href="#" class="easyui-menubutton" menu="#submenu_run" iconCls="icon-ae-run">Run</a>
			<a href="#" class="easyui-menubutton" menu="#submenu_help" iconCls="icon-ae-help">About</a>
			</div>
			<div id="submenu_file" style="width:100px;">
			<div id="newProject" iconCls="icon-ae-new">New</div>
			<div id="openProject" iconCls="icon-ae-open">Open</div>
			<div id="saveProject" iconCls="icon-ae-save" data-options="disabled:true">Save</div>
			<div id="closeProject" iconCls="icon-ae-file" data-options="disabled:true">Close</div>
			</div>
			<div id="submenu_view" style="width:100px;">
			<div id="showgrid" iconCls="icon-ae-grid">ShowGrid</div>
			<div id="snaptogrid" iconCls="icon-ae-snap">SnapToGrid</div>
			<div id="setgridsize" iconCls="icon-ae-resize">ConfigGrid</div>
			<div id="showregion" iconCls="icon-ae-view">WorldBounds</div>
			</div>
			<div id="submenu_tools" style="width:100px;">
			<div id="stamp" iconCls="icon-ae-stamp" data-options="disabled:true">Stamp</div>
			<div id="resource" iconCls="icon-ae-resource" data-options="disabled:true">Resource</div>
			<div id="tilemap" iconCls="icon-ae-tilemap" data-options="disabled:true">Tilemap</div>
			<div id="particle" iconCls="icon-ae-particle" data-options="disabled:true">Particle</div>
			<div id="audio" iconCls="icon-ae-audio" data-options="disabled:true">Audio</div>
			<div id="anime" iconCls="icon-ae-anim" data-options="disabled:true">Animation</div>
			<div id="physics" iconCls="icon-ae-physics" data-options="disabled:true">Physics</div>
			</div>
			<div id="submenu_app" style="width:100px;">
			<div id="app" iconCls="icon-ae-config" data-options="disabled:true">AppConfig</div>
			</div>
			<div id="submenu_run" style="width:100px;">
			<div id="run" iconCls="icon-ae-run" data-options="disabled:true">Run</div>
			<div id="release" iconCls="icon-ae-release" data-options="disabled:true">Release</div>
			</div>
			<div id="submenu_help" style="width:100px;">
			<div id="about" iconCls="icon-ae-about">About</div>
			<div id="help" iconCls="icon-ae-help">Help</div>
			<div class="menu-sep"></div>
			<div id="preferences" iconCls="icon-ae-config">Preferences</div>

			</div>
		</div>
		<!--<div id="bottomContainer" data-options="region:'south',split:true" style="height:50px;"></div>-->
		<div id="rightContainer" data-options="region:'east',split:true" title="Properties" style="width:200px;">
			<div class="easyui-tabs" fit="true" data-options="border:false">
				<div title="Attributes" fit="true">
					<div class="easyui-layout" fit="true">
						<div data-options="region:'north'" style="overflow:hidden">
							<a id="addProperty" class="easyui-linkbutton" data-options="iconCls:'icon-ae-add'" style="border:none"></a>
							<a id="removeProperty" class="easyui-linkbutton" data-options="iconCls:'icon-ae-remove'" style="border:none"></a>
						</div>
						<div id="attributes" class="easyui-propertygrid" data-options="region:'center'" fit="true"></div>
						<!-- <div id="attribute_description" data-options="region:'south',split:true" style="height:150px;"></div> -->
					</div>
				</div>
				<div title="events" fit="true">
					<div class="easyui-layout" fit="true">
						<div data-options="region:'north'" style="overflow:hidden">
							<a id="addEvent" class="easyui-linkbutton" data-options="iconCls:'icon-ae-add'" style="border:none"></a>
							<a id="removeEvent" class="easyui-linkbutton" data-options="iconCls:'icon-ae-remove'" style="border:none"></a>
						</div>
						<div id="events" data-options="region:'center'" ></div>
						<!-- <div id="event_description" data-options="region:'south',split:true" style="height:150px;"></div> -->
					</div>
				</div>
			</div>
		</div>
		<div id="leftContainer" data-options="region:'west',split:true" title="Scene" style="width:200px;">
			<div class="easyui-tabs" fit="true" data-options="border:false">
				<div title="scenes" fit="true">
					<div class="easyui-layout" fit="true">
						<div data-options="region:'north'" style="overflow:hidden">
							<a id="addScene" class="easyui-linkbutton" data-options="iconCls:'icon-ae-add'" style="border:none"></a>
							<a id="removeScene" class="easyui-linkbutton" data-options="iconCls:'icon-ae-remove'" style="border:none"></a>
						</div>
						<div id="scenes" data-options="region:'center'"></div>
						<!-- <div id="scene_description"  data-options="region:'south',split:true" style="height:150px;"></div> -->
					</div>
				</div>
				<div title="nodes" fit="true">
					<div class="easyui-layout" fit="true">
						<div data-options="region:'north'" style="overflow:hidden">
							<a id="addNode" class="easyui-linkbutton" data-options="iconCls:'icon-ae-add'" style="border:none"></a>
							<a id="removeNode" class="easyui-linkbutton" data-options="iconCls:'icon-ae-remove'" style="border:none"></a>
							<a id="moveupNode" class="easyui-linkbutton" data-options="iconCls:'icon-ae-moveup'" style="border:none"></a>
							<a id="movedownNode" class="easyui-linkbutton" data-options="iconCls:'icon-ae-movedown'" style="border:none"></a>
						</div>
						<div id="nodetreepanel" data-options="region:'center'" ><ul id="nodes" class="easyui-tree" ></ul></div>
						<!-- <div id="node_description" data-options="region:'south',split:true" style="height:150px;"></div> -->
					</div>
				</div>
			</div>
		</div>
		<div id="centerContainer" data-options="region:'center'">
			<div id="tabs" fit="true"  class="easyui-tabs" data-options="border:false">
				<div title="preview" style="overflow:hidden;">
					<div id="preview" class="grid" style="width:1024px;height:1024px;transform:scale(1.0);transform-origin:0 0;">
						<div id="scene" style="position:relative;width:800px;height:600px;border:2px solid red;">
							
						</div>
						<div id="worldbounds"></div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div id="context" class="easyui-menu">
		<div id="cm_addnode">
			<span>New</span>
			<div>
				<div class="cm_additem">image</div>
				<div class="cm_additem">sprite</div>
				<div class="cm_additem">animate</div>
				<div class="cm_additem">particle</div>
				<div class="cm_additem">text</div>
			</div>
		</div>
		<div id="cm_remove">Remove</div>
		<div id="cm_hdie">Hide</div>
		<div id="cm_show">Show</div>
		<div id="cm_lock">Lock</div>
		<div id="cm_unlock">UnLock</div>
		<div id="cm_anime">AnimeEditor</div>
		<div id="cm_audio">AudioEditor</div>
		<div id="cm_particle">ParticleEditor</div>
		<div id="cm_tilemap">TileMapEditor</div>
	</div>
	<div id="dd"></div>
	<form action="/files" id="filedialog" method="post" enctype="multipart/form-data" style="display:none">
	  <input id="upload" type="file" name="upload" />
	</form>
	<script>
	  if (!String.prototype.format) {
		String.prototype.format = function () {
		  var args = arguments;
		  return this.replace(/{(\d+)}/g, function (match, number) {
			return typeof args[number] != 'undefined'? args[number] : match ;
		  });
		};
	  }
	  if(!String.prototype.insert){
		String.prototype.insert = function (index, string) {
		  if (index > 0)
			return this.substring(0, index) + string + this.substring(index, this.length);
		  else
			return string + this;
		};
	  }
	  function parseBoolean(str){
		return String(str)=='true';
	  }
	  var edt=new AngoraEditor();
	</script>
	</body>
</html>
